<template>
	<view class="container">
		<view class="top">
			<navigator url="/pages/zwj/yingjijiuyuan/yingjijiuyuan">
				<image class="back" src="/static/images/白色左箭头.png" />
			</navigator>
			<view class="title">救援记录</view>
		</view>
		<view class="card-list">
			<view v-if="rescueList.length === 0" class="empty-tip">
				暂无救援信息
			</view>
			<uni-card v-for="(item, index) in rescueList" :key="index"
				:title="(rescueTypeList[item.rescueTypeId - 1] && rescueTypeList[item.rescueTypeId - 1].type) || '未知类型'"
				:extra="item.rescueTime" is-shadow>
				<view class="info-row"><text class="label">订单编号：</text><text class="value">{{ item.id }}</text></view>
				<view class="info-row"><text class="label">位置：</text><text
						class="value">{{ item.rescuePosition }}</text></view>
				<view class="info-row">
					<text class="label">车牌：</text>
					<text class="value">
						{{
					    (carList.find(car => car.id === item.carId) && carList.find(car => car.id === item.carId).carNum) || '未知车牌'
					  }}
					</text>
				</view>
				<view class="info-row" v-if="item.rescueTypeId === 3 && item.endPosition">
					<text class="label">结束地点：</text>
					<text class="value">{{ item.endPosition }}</text>
				</view>
				<view class="info-row">
					<text class="label">商家：</text>
					<text class="value">{{ (merchantList.find(merchant => merchant.id === item.merchantId) && merchantList.find(merchant => merchant.id === item.merchantId).name) || '无' }}</text>
				</view>
				<view class="info-row">
					<text class="label">评分：</text>
					<uni-rate :value="item.score || 0" :readonly="true" size="20"></uni-rate>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	import request from '../../../uitls/request';
	export default {
		data() {
			return {
				rescueList: [],
				carList: [],
				merchantList: [],
				rescueTypeList: [{
						id: 1,
						type: '搭电'
					},
					{
						id: 2,
						type: '换胎'
					},
					{
						id: 3,
						type: '拖车'
					}
				],
				userId: ''
			};
		},
		methods: {
			getRescueList() {
				request({
					url: '/mp/rescue/list',
					method: 'GET',
					data: {
						userId: this.userId
					},
					success: (res) => {
						this.rescueList = res.data.rows;
					}
				});
			},
			getCarList() {
				request({
					url: '/bigbase/carInfo/list',
					method: 'GET',
					success: (res) => {
						this.carList = res.data.rows;
					}
				});
			},
			getMerchantList() {
				request({
					url: '/merchant/merchant/list',
					method: 'GET',
					success: (res) => {
						this.merchantList = res.data.rows
					}
				})
			}
		},
		onLoad() {
			const userInfo = uni.getStorageSync('userInfo');
			this.userId = userInfo.id;
			this.getCarList();
			this.getRescueList();
			this.getMerchantList();
		}
	};
</script>


<style scoped>
	.container {
		padding-top: 20rpx;
		background: linear-gradient(180deg, #FF9800, #F44336);
		background-size: 100% 40%;
		background-repeat: no-repeat;
		min-height: 100vh;
		padding-bottom: 30rpx;
	}

	.top {
		width: 100%;
		padding: 60rpx 0 100rpx;
		position: relative;
	}

	.back {
		position: absolute;
		left: 20rpx;
		top: 80rpx;
		width: 30rpx;
		height: 30rpx;
		z-index: 10;
	}

	.title {
		text-align: center;
		font-size: 36rpx;
		color: #fff;
		line-height: 80rpx;
		font-weight: bold;
	}

	.card-list {
		padding: 0 24rpx;
		margin-top: -100rpx;
	}

	.info-row {
		display: flex;
		flex-direction: row;
		margin: 10rpx 0;
	}

	.label {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
		width: 180rpx;
	}

	.value {
		font-size: 28rpx;
		color: #555;
		flex: 1;
	}

	.empty-tip {
		text-align: center;
		color: #fff;
		font-size: 48rpx;
		margin-top: 100rpx;
	}
</style>